<template>
  <yx-modal
    ref="orgSelectModal"
    title="部门选择"
    :visible.sync="dialogVisible"
    width="600px"
    @confirm="confirm"
    @close="close"
  >
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card shadow="never" :body-style="bodyStyle">
          <div slot="header" class="cardHead">
            <el-checkbox v-model="selectAll" @change="onSelectAll"
              >全选</el-checkbox
            >
            <!-- <el-input v-model="queryOrg.orgName" clearable /> -->
          </div>
          <el-tree
            ref="tree"
            :data="orgList"
            :props="defaultProps"
            node-key="id"
            :check-strictly="true"
            show-checkbox
            @check="handleCheckChange"
            @check-change="checkChange"
            :default-expand-all="true"
          ></el-tree>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="cardHead" :body-style="bodyStyle">
          <div slot="header">
            <span>已选机构({{isMultiple?'多选':'单选'}})</span>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in checkedData" :key="index">
              <div>{{ item.name }}</div>
              <div class="btns">
                <span class="delete" @click="deleteRow(item.id, index)"
                  >删除</span
                >
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </yx-modal>
</template>

<script>
export default {
  name: "orgSelect",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      queryOrg:{
        orgName:null,
      },
      orgList: [
        {
          id: 1,
          name: "公司",
          children: [
            {
              id: 2,
              name: "研发部",
            },
            {
              id: 3,
              name: "产品部",
            },
            {
              id: 4,
              name: "运营部",
            },
            {
              id: 5,
              name: "研发部",
            },
            {
              id: 6,
              name: "产品部",
            },
            {
              id: 7,
              name: "运营部",
            },
            {
              id: 8,
              name: "研发部",
            },
            {
              id: 9,
              name: "产品部",
            },
            {
              id: 10,
              name: "运营部",
            },
            {
              id: 11,
              name: "研发部",
            },
            {
              id: 12,
              name: "产品部",
            },
            {
              id: 13,
              name: "运营部",
            },
            {
              id: 14,
              name: "研发部",
            },
            {
              id: 15,
              name: "产品部",
            },
            {
              id: 16,
              name: "运营部aaa",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      bodyStyle: {
        height: "300px",
        overflow: "auto",
      },
      selectAll: false,
      // 选中的数据
      checkedData: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        console.log("dialogVisible:get",this.visible);
        return this.visible;
      },
      set(val) {
        // this.$emit("updateVisible", val);
        console.log("dialogVisible:set",val);
        this.$emit("update:visible", val);
      },
    },
  },
  created() {},
  methods: {
    confirm() {
      if(this.isMultiple){
        this.$emit("ok", this.checkedData);
      }else{
        this.$emit("ok", this.checkedData.length>0?this.checkedData[0]:null);
      }
      this.close();
    },
    close() {
      this.dialogVisible = false;
      this.reset();
      this.$emit("cancel");
    },
    reset() {
      this.checkedData = []
      this.selectAll = false;
    },
    handleCheckChange(item, rows) {
      console.log("选择树: ", item, rows);
      const { checkedNodes } = rows;
      if(this.isMultiple){
        this.checkedData = checkedNodes;
      }else{
        if(!checkedNodes || checkedNodes.length==0){
          this.empty;
          return;
        }
        if(checkedNodes.length=2){
          // 取消勾选前面的那个
          this.checkedData=[item]
        }else{
          // 可能是勾选,也可能是取消勾选
          this.checkedData = checkedNodes;
        }
        this.$refs.tree.setCheckedNodes(this.checkedData)
      }
      
      
    },
    checkChange(data, checked, indeterminate){
      // console.log(data, checked, indeterminate, 'data, checked, indeterminate')
    },
    empty() {
      this.checkedData = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    deleteRow(id, index) {
      this.checkedData.splice(index, 1);
      this.$refs.tree.setChecked(id, false);
    },
    onSelectAll(bold) {
      if (bold) {
        let ids = this.allCheckBox(this.orgList);
        this.$refs.tree.setCheckedKeys(ids);
        const arr = this.$refs.tree.getCheckedNodes();
        this.checkedData = arr;
      } else {
        this.empty();
      }
    },
    allCheckBox(list) {
      let arr = [];
      list.forEach((item) => {
        if (item.children && item.children.length) {
          let ids = this.allCheckBox(item.children);
          arr = [...arr, ...ids];
        }
        arr.push(item.id);
      });
      return arr;
    },
  },
};
</script>

<style scoped>
/deep/ .el-card {
  border: 1px solid #ddd;
}
.list .item {
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.delete {
  color: #66b1ff;
  cursor: pointer;
}
.item:hover {
  background-color: #deeaf6;
}
/deep/.el-card__header{
  padding:10px 20px;
  border-bottom: 1px solid #ddd;
}
.empty {
  float: right;
  color: #66b1ff;
  cursor: pointer;
}
</style>